<template>
	<div>
		<div class="nav">
			<router-link to="/layout/fenlei-city">
				<img src="../../assets/smallIcon/return.png"  alt="">
			</router-link>
			景区
		</div>
		<div class="place">
			<ul>
				<li class="riben">日本</li>
				<li>东京</li>
				<li>京都</li>
				<li>大阪</li>
				<li>奈良</li>
				<li>箱根</li>
				<li>北海</li>
			</ul>
			<img src="../../assets/smallIcon/pull-down.png"  alt="">
		</div>
		<div class="video">
			<div class="picture">
				<img src="../../assets/landscape/liaotian_12.png"  alt="">
			</div>
			<div class="wenzi">
			    <p>浅草寺 Sensoii Temple</p>
			    <img src="../../assets/smallIcon/zuobiao.png"  alt="">
			    <span>日本京东</span>
		    </div>
		</div>
		<div class="all">
			<div class="picture">
				<img src="../../assets/landscape/liaotian_22.png"  alt="">
			</div>
			<div class="wenzi">
			    <p>伏见稻荷大社 Fushimi lnari Shrine</p>
			    <img src="../../assets/smallIcon/zuobiao.png"  alt="">
			    <span>日本京都</span>
		    </div>
		</div>
		<div class="town">
			<div class="picture">
				<img src="../../assets/landscape/liaotian31.png"  alt="">
				<div class="yuan">
					<img src="../../assets/smallIcon/yuan.png"  alt="">
				</div>
			</div>
			<div class="wenzi">
			    <p>首里城 Shuri Castle</p>
			    <img src="../../assets/smallIcon/zuobiao.png"  alt="">
			    <span>日本冲绳</span>
		    </div>
		</div>
	</div>
</template>

<script>

export default{
	name:"luyou",
	data(){
		return{

		}
	}
}	

</script>
<style scoped lang="less">
.nav{
	width:100%;
	height:100 / 50rem;
	background-color: #7DD19C;
	box-sizing:border-box;
	font-size: 36 / 50rem;
	color:#000000;
	position:fixed;
	top:0;
	left: 0;
	right: 0;
	img{
	    width:22 / 50rem;
	    height:40 / 50rem;
	    margin-left: 20 / 50rem;
	    margin-top: 30 / 50rem;
	    margin-right: 300 / 50rem;
    }
}
.place{
	height: 84 / 50rem;
	background-color: #fff;
	margin-top: 104 / 50rem;
    position:fixed;
	top:0;
	left: 0;
	right: 0;
	ul{
		li{
			float: left;
            padding: 20 / 50rem;
            font-size: 28 / 50rem;
            margin-top: 8 / 50rem;
        }
        .riben{
        	color:#7DD19C;
        }
	}
	img{
		width: 40 / 50rem;
		height: 22 / 50rem;
		margin-top:  32 / 50rem;
		margin-left:  20 / 50rem;
	}
}
.video{
	height: 400 / 50rem;
	background-color: #fff;
	margin-top: 210 / 50rem;

	.picture{
		width: 710 / 50rem;
		img{
			width: 710 / 50rem;
			height: 280 / 50rem;
			margin-left: 20 / 50rem;
			margin-top: 20 / 50rem;
		}
	}
	.wenzi{
		p{
			margin-top: 20 / 50rem;
			margin-left: 20 / 50rem;
		}
		img{
			display: inline-block;
            vertical-align: middle;
			width: 17 / 50rem;
			height: 21 / 50rem;
			margin-left: 20 / 50rem;
			margin-top: 14 / 50rem;
		}
		span{
			display: inline-block;
            vertical-align: middle;
			font-size: 18 / 50rem;
            margin-top: 12 / 50rem;
		}
	}
}
.all{
	height: 400 / 50rem;
	background-color: #fff;
	margin-top: 20 / 50rem;
	.picture{
		width: 710 / 50rem;
		img{
			width: 710 / 50rem;
			height: 280 / 50rem;
			margin-left: 20 / 50rem;
			margin-top: 20 / 50rem;
		}
	}
	.wenzi{
		p{
			margin-top: 20 / 50rem;
			margin-left: 20 / 50rem;
		}
		img{
			display: inline-block;
            vertical-align: middle;
			width: 17 / 50rem;
			height: 21 / 50rem;
			margin-left: 20 / 50rem;
			margin-top: 14 / 50rem;
		}
		span{
			display: inline-block;
            vertical-align: middle;
			font-size: 18 / 50rem;
            margin-top: 12 / 50rem;
		}
	}
}
.town{
	height: 400 / 50rem;
	background-color: #fff;
	margin-top: 20 / 50rem;
	.picture{
		width: 710 / 50rem;
		img{
			width: 710 / 50rem;
			height: 280 / 50rem;
			margin-left: 20 / 50rem;
			margin-top: 20 / 50rem;
		}
		.yuan{
			position: relative;
             img{
             	width: 88 / 50rem;
			    height: 88 / 50rem;
			    margin-left: 331 / 50rem;
			    margin-top: -185 / 50rem;
			    position: absolute;
             }
		}
	}
	.wenzi{
		p{
			margin-top: 20 / 50rem;
			margin-left: 20 / 50rem;
		}
		img{
			display: inline-block;
            vertical-align: middle;
			width: 17 / 50rem;
			height: 21 / 50rem;
			margin-left: 20 / 50rem;
			margin-top: 14 / 50rem;
		}
		span{
			display: inline-block;
            vertical-align: middle;
			font-size: 18 / 50rem;
            margin-top: 12 / 50rem;
		}
	}
}
</style>